<script setup>
import { useCartStore, useShopInfoStore } from '@/stores'
import CartCard from '@/components/CartCard.vue'
import { useRouter } from 'vue-router'
import { onMounted } from 'vue'

const cart = useCartStore()
const ShopInfo = useShopInfoStore()
const router = useRouter()

const cartList = cart.cartList
console.log([...cartList][0][1])
// const cartListLength = cart.cartList.clear(0)
onMounted(() => {
  console.log(cart.cartList)
  cart.cartList.delete('0')
  console.log(cart.cartList)
})

const cartList2 = [...cartList]
console.log(cartList2)

const getShopName = (id) => {
  return ShopInfo.nearbyList.find((item) => item.id == id).name
}
const totalCount = (value) => {
  console.log([...value])
  return [...value].reduce((all, next) => all + next[1].number, 0)
}
const gotoOrderConfirmation = (id) => {
  router.push({ path: '/orderconfirmation', query: { shopId: id } })
}
</script>

<template>
  <div class="cart_list">
    <div class="cart_list_header">
      我的全部购物车<span v-if="cartList2 > 0">({{ cartList2 }})</span>
    </div>
    <div class="cart_list_content">
      <div
        class="cart_list_content_item"
        v-for="item in [...cartList]"
        :key="item.name"
        @click="gotoOrderConfirmation(item[0])"
      >
        <div class="cart_list_content_title">{{ getShopName(item[0]) }}</div>
        <br />
        <div class="item" v-for="sku in [...[...item][1]]" :key="sku.name">
          <CartCard :list="sku[1]" />
        </div>
        <div class="total_count">共计{{ totalCount(item[1]) }}件</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import '@/style/viriables.scss';
.cart_list {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0.5rem;
  background-color: $dark-bgColor;
  overflow-y: scroll;

  &_header {
    padding: 0.08rem 0.18rem;
    font-size: 0.16rem;
    color: $content-fontcolor;
    text-align: center;
    line-height: 0.24rem;
    background-color: $bgColor;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }

  &_content {
    width: 90%;
    margin: 0.68rem auto;
    &_title {
      font-size: 20px;
      height: 30px;
      margin: 20px 0 0 10px;
    }
    &_item {
      margin-top: 10px;
      padding-bottom: 3px;
      box-shadow: 0 0 2px #ccc;
    }
  }
}
.item {
  // border: 1px solid red;
  margin-top: 10px;
}
.total_count {
  font-size: 15px;
  border-radius: 3px;
  color: #a0a0a0;
  background-color: #b1b1b182;
  margin: 25px auto;
  width: 90%;
  height: 30px;
  line-height: 30px;
  text-align: center;
}
</style>